<template>
    <div>
        <Header v-if="showHeader" title="我审批的"></Header>
        <div ref="topWarp" class="top-warp">
            <div class="nav">
                <div :class="{'active':tabType==0}" @click="changeTab(0)">个人绩效</div>
                <div :class="{'active':tabType==1}" @click="changeTab(1)">下属绩效</div>
            </div>
            <div class="table_tool" v-show="tabType==1">
                <FilterData :organizationTree="organizationTree" @filterOrganization="filterOrganization" :guides="guides" @filterGuides="filterGuides" @filterIsMenber="filterIsMenber"></FilterData>
                <SortData :sortToolsList="sortToolsList" @sortTable="sortTable"></SortData>
            </div>
        </div>
        <!--个人绩效-->
        <mescroll-vue ref="mescroll0" v-show="tabType==0" :down="getMescrollDown(0)" :up="getMescrollUp(0)" @init="mescrollInit0">
            <div class="performance_content">
                <UserInfo :userInfo="userInfo"></UserInfo>
                <ul id="dataList0">
                    <CheckList :checkListData="tab0.list"></CheckList>
                </ul>
            </div>
        </mescroll-vue>
        <!-- 下属绩效 可不配down-->
        <mescroll-vue ref="mescroll1" v-show="tabType==1" :up="getMescrollUp(1)" @init="mescrollInit1">
            <ul id="dataList1">
                <!-- <ApproveList :list="tab1.list" :pageName="pageNameTab2"></ApproveList> -->
                <TableList :tableList="tab1.list" fromPage='performanceTabs'></TableList>
            </ul>
        </mescroll-vue>
        <Loading v-show="showLoading"></Loading>
    </div>
</template>
<script>
import MescrollVue from 'mescroll.js/mescroll.vue';
import Header from "@/components/Header.vue";
import Loading from "@/components/Loading.vue";
import FilterData from "@/components/FilterData.vue";
import SortData from "@/components/SortData.vue"
import UserInfo from '@/components/UserInfo.vue'
import CheckList from '@/components/CheckList.vue'
import TableList from '@/components/business/TableList.vue'
import { deepCopy } from "@/plugins/deepCopy.js";
import { profile,checkList,subordinateStaffers,organizations,guides } from "@/request/api.js";
// import Axios from 'axios';
export default {
    data(){
        return {
            showHeader:this.$store.state.showHeader,
            clientH:'',
            showLoading:false,
            offsetTop:0,
            active: 0,
            sticky:true,
            order_by:'fd_recent_score',
            sort:'desc',
            organic_id:'0',
            guide_code:'All',
            fd_sta_is_official:'',
            userInfo:{},
            organizationTree:[],
            guides:[{value: "All", text: "全部"}],
            sortToolsList:[
                {text:'在职天数',isSort:false,order:'',orderSort:false},
                {text:'历史招单',isSort:true,order:'fd_sta_merchants',orderSort:false},
                {text:'最近得分',isSort:true,order:'fd_recent_score',orderSort:false},
                {text:'当前考核',isSort:true,order:'fd_ongoing_score',orderSort:false},
            ],
            mescroll: null,
            tab0: {mescroll: null, list: [], isListInit: false}, // 全部
            tab1: {mescroll: null, list: [], isListInit: false}, // 奶粉
            tabType: 0, // 菜单类型
            num:1,
            limit:10,
        }
    },
    components:{
        MescrollVue,
        Header,
        Loading,
        UserInfo,
        CheckList,
        FilterData,
        SortData,
        TableList,
    },
    created() {
        //个人信息
        profile({token:this.$store.state.token}).then(res => {
            let staffer = res.data.staffer;
            //个人信息
            this.userInfo = staffer;
        }).catch(error=>{
            this.showLoading = false;
            console.log(error)
        })
    },
    mounted(){
        let h=window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
        this.staffer_id = localStorage.getItem('staffer_id');
        this.$refs.mescroll1.$el.style.top = 133 + 'px';
        if (this.showHeader) {
            this.$refs.topWarp.style.top = 44 + 'px'
            this.$refs.mescroll0.$el.style.top = 132 + 'px'
            this.$refs.mescroll1.$el.style.top = 176 + 'px'
        };
        //组织树
        organizations({token:this.$store.state.token}).then(res => {
            this.showLoading = false;
            let data = res.data.tree;
            this.organizationTree = deepCopy(data);
            this.organizationTree = JSON.parse(JSON.stringify(this.organizationTree).replace(/name/g, 'label'));
            this.organizationTree = JSON.parse(JSON.stringify(this.organizationTree).replace(/id/g, 'value'));
            this.organizationTree = JSON.parse(JSON.stringify(this.organizationTree).replace(/pvalue/g, 'pid'));
        }).catch(error=>{
            this.showLoading = false;
            console.log(error)
        });
        //店导身份
        guides({token:this.$store.state.token}).then(res => {
            this.showLoading = false;
            let guideLists = res.data.guides;
            guideLists = JSON.parse(JSON.stringify(guideLists).replace(/name/g, 'text'));
            guideLists = JSON.parse(JSON.stringify(guideLists).replace(/code/g, 'value'));
            this.guides = this.guides.concat(guideLists)
        }).catch(error=>{
            this.showLoading = false;
            console.log(error)
        });
        // Axios.all([
        //     //组织树
        //     organizations({token:this.$store.state.token}).then(res => res.data.tree),
        //     //店导身份
        //     guides({token:this.$store.state.token}).then(res => res.data.guides)
        // ]).then(Axios.spread((organizations,guides)=>{
        //     this.showLoading = false;
        //     //组织树
        //     let data = organizations;
        //     this.organizationTree = deepCopy(data);
        //     this.organizationTree = JSON.parse(JSON.stringify(this.organizationTree).replace(/name/g, 'label'));
        //     this.organizationTree = JSON.parse(JSON.stringify(this.organizationTree).replace(/id/g, 'value'));
        //     this.organizationTree = JSON.parse(JSON.stringify(this.organizationTree).replace(/pvalue/g, 'pid'));
        //     //店导身份
        //     let guideLists = guides;
        //     guideLists = JSON.parse(JSON.stringify(guideLists).replace(/name/g, 'text'));
        //     guideLists = JSON.parse(JSON.stringify(guideLists).replace(/code/g, 'value'));
        //     this.guides = this.guides.concat(guideLists)
        // })).catch(error=>{
        //     this.showLoading = false;
        //     console.log(error)
        // })
        // this.tabType = this.$store.state.tabActive;
    },
    methods:{
        // mescroll组件初始化的回调,可获取到mescroll对象
        mescrollInit0 (mescroll) {
            mescroll.tabType = 0; // 加入标记,便于在回调中取到对应的list
            this.tab0.mescroll = mescroll;
        },
        mescrollInit1 (mescroll) {
            mescroll.tabType = 1;
            this.tab1.mescroll = mescroll;
        },
        // 多mescroll的配置,需通过方法获取,保证每个配置是单例
        getMescrollDown (tabType) {
            let isAuto = tabType === 0; // 第一个mescroll传入true,列表自动加载
            return {
                auto: isAuto,
                callback: this.downCallback
            }
        },
        getMescrollUp (tabType) {
            let emptyWarpId = 'dataList' + tabType;
            return {
                auto: false,
                callback: this.upCallback, // 上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
                noMoreSize: 5, // 如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
                page: {
                    num: this.num - 1, //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
                    limit: this.limit //每页数据条数,默认10
                },
                empty: {
                warpId: emptyWarpId, // 父布局的id;
                tip: '没有更多了~', // 提示
                },
                htmlNodata: '<p class="upwarp-nodata">没有更多了~</p>', // 无数据的布局
            }
        },
        /* 下拉刷新的回调 */
        downCallback (mescroll) {
            // 这里加载你想下拉刷新的数据, 比如刷新tab1的轮播数据
            if (mescroll.tabType === 0) {
                // loadSwiper();
            } else if (mescroll.tabType === 1) {
                // ....
            }
            mescroll.resetUpScroll();// 触发下拉刷新的回调,加载第一页的数据
        },
        /* 上拉加载的回调 page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数 */
        upCallback (page, mescroll) {
            if (mescroll.tabType === 0) {
                // 全部
                this.tab0.isListInit = true;// 标记列表已初始化,保证列表只初始化一次
                checkList({token:this.$store.state.token,staffer_id:this.staffer_id,page:page.num,per_page:page.limit}).then(res=>{
                    // 请求的列表数据
                    let arr = res.data
                    mescroll.endSuccess(arr.performances.length);// 联网成功的回调,隐藏下拉刷新和上拉加载的状态;
                    // 如果是第一页需手动置空列表
                    if (page.num === 1) this.tab0.list = []
                    // 把请求到的数据添加到列表
                    this.tab0.list = this.tab0.list.concat(arr.performances)
                        // 数据渲染成功后,隐藏下拉刷新的状态
                    this.$nextTick(() => {
                        mescroll.endSuccess(arr.performances.length)
                    })
                }).catch((e) => {
                    if (page.num === 1) this.tab0.isListInit = false;
                    // 联网失败的回调,隐藏下拉刷新和上拉加载的状态;
                    mescroll.endErr()
                })
            } else if (mescroll.tabType === 1) {
                this.tab1.isListInit = true;// 标记列表已初始化,保证列表只初始化一次
                subordinateStaffers({
                    token:this.$store.state.token,
                    sort:this.sort,
                    order_by:this.order_by,
                    organic_id:this.organic_id,
                    guide_code:this.guide_code,
                    fd_sta_is_official:this.fd_sta_is_official,
                    page:page.num,
                    per_page:page.limit
                }).then(res=>{
                    // 请求的列表数据
                    let arr = res.data
                    mescroll.endSuccess(arr.staffers.length);// 联网成功的回调,隐藏下拉刷新和上拉加载的状态;
                    // 如果是第一页需手动置空列表
                    if (page.num === 1) this.tab1.list = []
                    // 把请求到的数据添加到列表
                    this.tab1.list = this.tab1.list.concat(arr.staffers)
                        // 数据渲染成功后,隐藏下拉刷新的状态
                    this.$nextTick(() => {
                        mescroll.endSuccess(arr.staffers.length)
                    })
                }).catch((e) => {
                    if (page.num === 1) this.tab1.isListInit = false;
                    // 联网失败的回调,隐藏下拉刷新和上拉加载的状态;
                    mescroll.endErr()
                })
            }
        },
        // 切换菜单
        changeTab (type) {
            let curTab = this.getTabData(this.tabType);// 当前列表
            let newTab = this.getTabData(type);// 新转换的列表
            this.tabType = type // 切换菜单
            this.$store.commit('setTabActive',this.tabType);
            if (!newTab.isListInit) {
                newTab.mescroll.triggerDownScroll(); // 加载列表
            }
        },
        // 获取菜单对应的数据
        getTabData (tabType) {
            if (tabType == null) tabType = this.tabType;
            if (tabType === 0) {
                return this.tab0;
            } else if (tabType === 1) {
                return this.tab1;
            }
        },
        //排序
        sortTable(data){
            this.tab1.isListInit = true;// 标记列表已初始化,保证列表只初始化一次
            this.num = 1;
            this.tab1.list = []
            this.showLoading = true;
            this.order_by = data.order;
            this.sort = data.order_type;
            subordinateStaffers({
                token:this.$store.state.token,
                sort:this.sort,
                order_by:this.order_by,
                organic_id:this.organic_id,
                guide_code:this.guide_code,
                fd_sta_is_official:this.fd_sta_is_official,
                page:this.num,
                per_page:this.limit
            }).then(res=>{
                this.showLoading = false;
                let list = res.data;
                this.tab1.mescroll.endSuccess(list.staffers.length);// 联网成功的回调,隐藏下拉刷新和上拉加载的状态;
                // 把请求到的数据添加到列表
                this.tab1.list = list.staffers;
                // 数据渲染成功后,隐藏下拉刷新的状态
                this.$nextTick(() => {
                    this.tab1.mescroll.endSuccess(list.staffers.length)
                })
            }).catch(error=>{
                console.log(error);
                this.showLoading = false;
            })
        },
        //组织过滤
        filterOrganization(data){
            if (data) {
                this.organic_id = data.value;
            }else{
                this.organic_id = '0'
            }
            this.tab1.isListInit = true;// 标记列表已初始化,保证列表只初始化一次
            this.num = 1;
            this.tab1.list = []
            this.showLoading = true;
            subordinateStaffers({
                token:this.$store.state.token,
                sort:this.sort,
                order_by:this.order_by,
                organic_id:this.organic_id,
                guide_code:this.guide_code,
                fd_sta_is_official:this.fd_sta_is_official,
                page:this.num,
                per_page:this.limit
            }).then(res=>{
                this.showLoading = false;
                let list = res.data;
                this.tab1.mescroll.endSuccess(list.staffers.length);// 联网成功的回调,隐藏下拉刷新和上拉加载的状态;
                // 把请求到的数据添加到列表
                this.tab1.list = list.staffers;
                // 数据渲染成功后,隐藏下拉刷新的状态
                this.$nextTick(() => {
                    this.tab1.mescroll.endSuccess(list.staffers.length)
                })
            }).catch(error=>{
                console.log(error);
                this.showLoading = false;
            })
        },
        // 筛选店导
        filterGuides(data){
            this.tab1.isListInit = true;// 标记列表已初始化,保证列表只初始化一次
            this.num = 1;
            this.tab1.list = []
            this.showLoading = true;
            this.guide_code = data;
            subordinateStaffers({
                token:this.$store.state.token,
                sort:this.sort,
                order_by:this.order_by,
                organic_id:this.organic_id,
                guide_code:this.guide_code,
                fd_sta_is_official:this.fd_sta_is_official,
                page:this.num,
                per_page:this.limit
            }).then(res=>{
                this.showLoading = false;
                let list = res.data;
                this.tab1.mescroll.endSuccess(list.staffers.length);// 联网成功的回调,隐藏下拉刷新和上拉加载的状态;
                // 把请求到的数据添加到列表
                this.tab1.list = list.staffers;
                // 数据渲染成功后,隐藏下拉刷新的状态
                this.$nextTick(() => {
                    this.tab1.mescroll.endSuccess(list.staffers.length)
                })
            }).catch(error=>{
                console.log(error);
                this.showLoading = false;
            })
        },
        //是否转正
        filterIsMenber(data){
            this.tab1.isListInit = true;// 标记列表已初始化,保证列表只初始化一次
            this.num = 1;
            this.tab1.list = []
            this.showLoading = true;
            this.fd_sta_is_official = data;
            subordinateStaffers({
                token:this.$store.state.token,
                sort:this.sort,
                order_by:this.order_by,
                organic_id:this.organic_id,
                guide_code:this.guide_code,
                fd_sta_is_official:this.fd_sta_is_official,
                page:this.num,
                per_page:this.limit
            }).then(res=>{
                this.showLoading = false;
                let list = res.data;
                this.tab1.mescroll.endSuccess(list.staffers.length);// 联网成功的回调,隐藏下拉刷新和上拉加载的状态;
                // 把请求到的数据添加到列表
                this.tab1.list = list.staffers;
                // 数据渲染成功后,隐藏下拉刷新的状态
                this.$nextTick(() => {
                    this.tab1.mescroll.endSuccess(list.staffers.length)
                })
            }).catch(error=>{
                console.log(error);
                this.showLoading = false;
            })
        }
    },
}
</script>
<style lang="less" scoped>
.refresh_wrapper{
    width: 100%;
    min-height: 300px;
    background-color: #fff;
}
.performance_content{padding: 10px 20px;}
/*以fixed的方式固定mescroll的高度*/
  .mescroll {
    position: fixed;
    top: 44px;
    bottom: 0;
    height: auto;
  }

  .top-warp{
    z-index: 999;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 44px;
    background-color: #fff;
  }
  .top-warp .nav{
    text-align: center;
    height: 44px;
    background: #fff;
    width: 100%;
    padding: 0 15px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .top-warp .nav > div{
    line-height: 44px;
    font-size: 17px;
    flex: 1;
  }
  .top-warp .nav .active{
    border-bottom: 1px solid #ff661a;
    color: #ff661a;
  }
</style>